<template>
    <div class="page_root" data-page-name="项目看板" data-page-identification="q_tuvnfkjbh5">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_iggljq0jjk 自定义模板_wn2w3ezp1c -->
            <div class="body">
                <div class="tree-box">
                    <a-input-search
                        v-model:value="searchValue"
                        placeholder="请输入查询关键字"
                        @change="onChange"
                        style="margin: 20px auto"
                    />
                    <a-tree
                        v-if="treeData && treeData.length > 0"
                        :autoExpandParent="autoExpandParent"
                        @expand="onExpand"
                        v-model:expandedKeys="expandedKeys"
                        :fieldNames="fieldNames"
                        v-model:selectedKeys="selectedKeys"
                        show-line
                        :tree-data="treeData"
                        @select="treeSelect"
                    >
                        <template #title="{ projectName, id, children, parentId }">
                            <span> {{ projectName }}</span>
                        </template>
                    </a-tree>
                </div>
                <div class="right-box">
                    <div class="back-ground"
                        >{{ projectData.projectName }}
                        <span v-if="projectData.projectName" class="title"
                            >[ {{ projectData.startTime }}~{{ projectData.endTime }} {{ projectData.plName }} ]
                        </span>
                    </div>
                    <!-- 里程碑进度 -->
                    <div class="main">
                        <div class="progress">
                            <div class="col"> 进度里程碑</div>
                            <div class="no-progress" v-if="milestoneDataList.length == 0">
                                <div class="tip">
                                    <p class="message">暂无进度里程碑</p>
                                </div>
                            </div>
                            <div class="timeaxis" v-if="milestoneDataList.length > 0">
                                <template v-for="(item, index) in milestoneDataList" :key="item.id">
                                    <div class="box">
                                        <div class="item">
                                            <p class="cercle" v-if="index === 0"></p>
                                            <caret-right-filled
                                                class="arrow"
                                                v-if="index === milestoneDataList.length - 1"
                                            />
                                            <div class="center">{{ item.milepostName }}</div>
                                        </div>
                                        <div class="circular">
                                            <a-tooltip :overlayStyle="overlayStyle">
                                                <template #title>
                                                    <!-- <div style="width:326px ; height: 200px;"> -->
                                                    <a-row style="margin-top: 5px; margin-left: 5px; margin-right: 3px">
                                                        <a-col
                                                            :span="11"
                                                            class="tip-tool"
                                                            style="display: flex; justify-content: space-between"
                                                        >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-family: PingFangSC-Regular;
                                                                    opacity: 0.8;
                                                                "
                                                                >状态：</p
                                                            >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    font-family: PingFangSC-Semibold;
                                                                "
                                                                >{{ item.milepostStatus }}</p
                                                            >
                                                        </a-col>

                                                        <a-col
                                                            :span="11"
                                                            offset="2"
                                                            class="tip-tool"
                                                            style="display: flex; justify-content: space-between"
                                                        >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-family: PingFangSC-Regular;
                                                                    opacity: 0.8;
                                                                "
                                                                >当前进度：</p
                                                            >
                                                            <span
                                                                style="
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    font-family: PingFangSC-Semibold;
                                                                "
                                                                >{{ item.finishSchedule }}%</span
                                                            >
                                                        </a-col>
                                                    </a-row>
                                                    <a-row style="margin-left: 5px; margin-right: 3px">
                                                        <a-col
                                                            :span="11"
                                                            class="tip-tool"
                                                            style="display: flex; justify-content: space-between"
                                                        >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-family: PingFangSC-Regular;
                                                                    opacity: 0.8;
                                                                "
                                                                >总任务数：</p
                                                            >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    font-family: PingFangSC-Semibold;
                                                                "
                                                                >{{ item.taskNum }}</p
                                                            >
                                                        </a-col>
                                                        <a-col
                                                            :span="11"
                                                            offset="2"
                                                            class="tip-tool"
                                                            style="display: flex; justify-content: space-between"
                                                        >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-family: PingFangSC-Regular;
                                                                    opacity: 0.8;
                                                                "
                                                                >完成任务数：</p
                                                            >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    font-family: PingFangSC-Semibold;
                                                                "
                                                                >{{ item.sumFinishNum }}</p
                                                            >
                                                        </a-col>
                                                    </a-row>
                                                    <a-row style="margin-left: 5px; margin-right: 3px">
                                                        <a-col
                                                            :span="11"
                                                            class="tip-tool"
                                                            style="display: flex; justify-content: space-between"
                                                        >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-family: PingFangSC-Regular;
                                                                    opacity: 0.8;
                                                                "
                                                                >未完成任务数：</p
                                                            >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    font-family: PingFangSC-Semibold;
                                                                "
                                                                >{{ item.unFinishNum }}</p
                                                            >
                                                        </a-col>
                                                        <a-col
                                                            :span="11"
                                                            offset="2"
                                                            class="tip-tool"
                                                            style="display: flex; justify-content: space-between"
                                                        >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-family: PingFangSC-Regular;
                                                                    opacity: 0.8;
                                                                "
                                                                >正常完成任务数：</p
                                                            >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    font-family: PingFangSC-Semibold;
                                                                "
                                                                >{{ item.finishNum }}</p
                                                            >
                                                        </a-col>
                                                    </a-row>
                                                    <a-row style="margin-left: 5px; margin-right: 3px">
                                                        <a-col
                                                            :span="11"
                                                            class="tip-tool"
                                                            style="display: flex; justify-content: space-between"
                                                        >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-family: PingFangSC-Regular;
                                                                    opacity: 0.8;
                                                                "
                                                                >延迟完成任务数：</p
                                                            >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    font-family: PingFangSC-Semibold;
                                                                "
                                                                >{{ item.postponeFinishNum }}</p
                                                            >
                                                        </a-col>
                                                        <a-col
                                                            :span="11"
                                                            offset="2"
                                                            class="tip-tool"
                                                            style="display: flex; justify-content: space-between"
                                                        >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-family: PingFangSC-Regular;
                                                                    opacity: 0.8;
                                                                "
                                                                >进行中任务数：</p
                                                            >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    font-family: PingFangSC-Semibold;
                                                                "
                                                                >{{ item.underwayNum }}</p
                                                            >
                                                        </a-col>
                                                    </a-row>
                                                    <a-row style="margin-left: 5px; margin-right: 3px">
                                                        <a-col
                                                            :span="11"
                                                            class="tip-tool"
                                                            style="display: flex; justify-content: space-between"
                                                        >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-family: PingFangSC-Regular;
                                                                    opacity: 0.8;
                                                                "
                                                                >延期任务数：</p
                                                            >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    font-family: PingFangSC-Semibold;
                                                                "
                                                                >{{ item.postponeNum }}</p
                                                            >
                                                        </a-col>
                                                        <a-col
                                                            :span="11"
                                                            offset="2"
                                                            class="tip-tool"
                                                            style="display: flex; justify-content: space-between"
                                                        >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-family: PingFangSC-Regular;
                                                                    opacity: 0.8;
                                                                "
                                                                >未启动任务数：</p
                                                            >
                                                            <p
                                                                style="
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    font-family: PingFangSC-Semibold;
                                                                "
                                                                >{{ item.unStartNum }}</p
                                                            >
                                                        </a-col>
                                                    </a-row>
                                                    <!-- </div> -->
                                                </template>
                                                <!-- <div class="no-start">
                   </div> -->
                                                <div class="circular" :id="`chart${index}`"> </div>
                                            </a-tooltip>
                                        </div>
                                        <div class="detailed-information">
                                            <div class="message">
                                                <p class="plan">计划开始：{{ item.startTime }}</p>
                                                <p class="plan">实际开始：{{ item.actualStartTime }}</p>
                                                <p class="plan">计划完成：{{ item.endTime }}</p>
                                                <p class="plan"
                                                    >实际完成：{{ item.actualFinishTime }}
                                                    <span v-if="item.delayDay !== null"
                                                        ><a-tag class="tag-day">延期{{ item.delayDay }}</a-tag></span
                                                    >
                                                </p>
                                                <a-tag class="plan-count" v-if="item.changeNum !== 0"
                                                    >变更{{ item.changeNum }}次</a-tag
                                                >
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <!-- END 里程碑进度 -->

                        <!-- 回款里程碑 -->
                        <div class="collection">
                            <!-- <a-card> -->
                            <div class="collection-col"> 回款里程碑 </div>
                            <div class="add-edit-btns">
                                <div ghost class="collection-btn" @click="addCollection"
                                    ><plus-square-outlined class="icon" />新增</div
                                >
                            </div>
                            <div class="no-collection" v-if="collectionList.length == 0">
                                <div class="tip">
                                    <p class="message">请点击右上角，<span>新增回款里程碑</span></p>
                                </div>
                            </div>
                            <div class="collection-message-group" v-if="collectionList.length > 0">
                                <div class="collection-message" v-for="(item, index) in collectionList">
                                    <div class="drop-down">
                                        <a-dropdown>
                                            <template #overlay>
                                                <a-menu>
                                                    <a-menu-item key="1">
                                                        <a-button
                                                            size="small"
                                                            class="btn-drop"
                                                            type="link"
                                                            @click="handlerEdit(item)"
                                                        >
                                                            编辑
                                                        </a-button>
                                                    </a-menu-item>
                                                    <a-menu-item key="2">
                                                        <a-popconfirm
                                                            title="请确认是否删除当前内容"
                                                            @confirm="handlerDelete(item)"
                                                        >
                                                            <a-button size="small" class="btn-drop" type="link"
                                                                >删除</a-button
                                                            >
                                                        </a-popconfirm>
                                                    </a-menu-item>

                                                    <a-menu-item key="3">
                                                        <a-button
                                                            size="small"
                                                            type="link"
                                                            class="btn-drop"
                                                            @click="handlerShowNotes(item)"
                                                        >
                                                            记录
                                                        </a-button>
                                                    </a-menu-item>
                                                </a-menu>
                                            </template>
                                            <a-button size="small" type="link">
                                                <div class="more-cion"><div class="dot-icon">...</div></div>
                                                <DownOutlined />
                                            </a-button>
                                        </a-dropdown>
                                    </div>
                                    <span class="order">{{ index + 1 }}</span>
                                    <a-tooltip>
                                        <template #title>
                                            {{ item.paymentMilepostName }}({{ item.proportion }})
                                        </template>

                                        <p class="collection-message-title"
                                            >{{ item.paymentMilepostName }}({{ item.proportion }})</p
                                        >
                                    </a-tooltip>
                                    <!-- 全绿 -->
                                    <!-- 全绿 -->
                                    <p
                                        class="payment-received"
                                        v-if="
                                            Number(item.pendingPayment) === 0 &&
                                            new Date(item.actuallyPaymentTime) <= new Date(item.currentPlanTime)
                                        "
                                    >
                                        <!-- 待回款0 -->
                                        <span class="title"><check-circle-filled class="icon" />已回款</span>
                                        <span class="finish-money"
                                            >{{ item.money > item.actualMoney ? item.money : item.actualMoney
                                            }}<span class="finish-unit"> 万元</span>
                                            <a-tag
                                                class="money-tag"
                                                v-if="item.delayTime > 0"
                                                style="
                                                    position: absolute;
                                                    top: 65%;
                                                    left: 75%;
                                                    z-index: 888;
                                                    border-radius: 10px;
                                                    font-size: 12px;
                                                    margin-left: 0;
                                                    font-weight: 400;
                                                "
                                                >延期{{ item.delayTime }}天</a-tag
                                            ></span
                                        >
                                    </p>
                                    <!-- 红绿 -->
                                    <p
                                        class="payment-received"
                                        v-if="
                                            Number(item.pendingPayment) === 0 &&
                                            new Date(item.actuallyPaymentTime) > new Date(item.currentPlanTime)
                                        "
                                    >
                                        <!-- 待回款0 -->
                                        <span class="title"
                                            ><check-circle-filled class="icon" style="color: #ff2a00" />已回款</span
                                        >
                                        <span class="finish-money"
                                            >{{ item.money > item.actualMoney ? item.money : item.actualMoney
                                            }}<span class="finish-unit"> 万元</span>
                                            <a-tag
                                                class="money-tag"
                                                v-if="item.delayTime > 0"
                                                style="
                                                    position: absolute;
                                                    top: 65%;
                                                    left: 75%;
                                                    z-index: 888;
                                                    border-radius: 10px;
                                                    font-size: 12px;
                                                    margin-left: 0;
                                                    font-weight: 400;
                                                "
                                                >延期{{ item.delayTime }}天</a-tag
                                            ></span
                                        >
                                    </p>
                                    <!-- 全红 -->
                                    <p
                                        class="tobe-collected-received"
                                        v-if="
                                            Number(item.pendingPayment) !== 0 &&
                                            new Date(item.currentPlanTime) < new Date()
                                        "
                                        >待回款
                                        <!-- 待回款！0 -->
                                        <span class="fail-money"
                                            >{{ item.pendingPayment }}<span class="fail-unit"> 万元</span
                                            ><a-tag
                                                class="money-tag"
                                                v-if="item.delayTime > 0"
                                                style="
                                                    position: absolute;
                                                    top: 65%;
                                                    left: 75%;
                                                    z-index: 888;
                                                    border-radius: 10px;
                                                    font-size: 12px;
                                                    margin-left: 0;
                                                    font-weight: 400;
                                                "
                                                >延期{{ item.delayTime }}天</a-tag
                                            ></span
                                        >
                                    </p>
                                    <!-- 灰色 -->
                                    <p
                                        class="uncollected-payment"
                                        v-if="
                                            Number(item.pendingPayment) !== 0 &&
                                            new Date(item.currentPlanTime) > new Date()
                                        "
                                        >待回款
                                        <!-- 待回款！0 -->
                                        <span class="uncollected-money"
                                            >{{ item.pendingPayment }}<span class="uncollected-unit"> 万元</span
                                            ><a-tag
                                                class="money-tag"
                                                v-if="item.delayTime > 0"
                                                style="
                                                    position: absolute;
                                                    top: 65%;
                                                    left: 75%;
                                                    z-index: 888;
                                                    border-radius: 10px;
                                                    font-size: 12px;
                                                    margin-left: 0;
                                                    font-weight: 400;
                                                "
                                                >延期{{ item.delayTime }}天</a-tag
                                            ></span
                                        >
                                    </p>
                                    <a-divider class="divider-line" />
                                    <p class="milepost-date">
                                        最初计划：{{ item.planPaymentTime }}<br />
                                        当前计划：{{ item.currentPlanTime }}<br />
                                        实际回款：{{ item.actuallyPaymentTime }}
                                    </p>
                                    <a-button class="accomplish" v-if="Number(item.pendingPayment) === 0" disabled
                                        >已完成</a-button
                                    >
                                    <a-button
                                        class="noAccomplish"
                                        type="primary"
                                        ghost
                                        v-else
                                        @click="confirm(item.id, item.pendingPayment)"
                                        >完成</a-button
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="cost-analysis">
                            <div class="collection-analysis">
                                <div class="cost-col">回款分析</div>
                                <div class="left-cost-chart">
                                    <div ref="costChart" style="width: 40%; height: 200px"> </div>
                                    <div
                                        v-if="totalProjectAmount"
                                        style="
                                            flex: 1;
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: space-around;
                                            height: 118px;
                                            margin-top: 9%;
                                        "
                                    >
                                        <hr class="hr-money" />
                                        <div>
                                            <div style="line-height: 40px">
                                                <div
                                                    style="
                                                        width: 10px;
                                                        height: 10px;
                                                        border-radius: 10px;
                                                        background-color: #3875ff;
                                                        display: inline-block;
                                                        margin-right: 5px;
                                                    "
                                                >
                                                </div>
                                                <span style="font-size: 15px"
                                                    >已回款
                                                    <span
                                                        style="
                                                            font-size: 26px;
                                                            font-weight: 600;
                                                            position: relative;
                                                            height: 34px;
                                                            display: inline-block;
                                                            width: 131px;
                                                            text-align: right;
                                                        "
                                                    >
                                                        {{ collectionMoneyData[0].value }}
                                                    </span>

                                                    万元</span
                                                >
                                            </div>
                                        </div>
                                        <hr class="hr-money" />
                                        <div style="line-height: 40px">
                                            <div
                                                style="
                                                    width: 10px;
                                                    height: 10px;
                                                    border-radius: 10px;
                                                    background-color: #ff8448;
                                                    display: inline-block;
                                                    margin-right: 5px;
                                                "
                                            >
                                            </div>

                                            <span style="font-size: 15px"
                                                >待回款
                                                <span
                                                    style="
                                                        font-size: 26px;
                                                        font-weight: 600;
                                                        height: 34px;
                                                        position: relative;
                                                        display: inline-block;
                                                        width: 128px;
                                                        text-align: right;
                                                    "
                                                >
                                                    {{ collectionMoneyData[1].value }}
                                                </span>
                                                万元</span
                                            >
                                        </div>
                                        <hr class="hr-money" />
                                    </div>
                                </div>
                            </div>
                            <div class="prime-analysis">
                                <div class="cost-col">成本分析</div>
                                <div class="content-cost" v-if="false">
                                    <div class="right-chart">
                                        <div ref="primeChart" style="height: 200px; width: 42%"></div>
                                        <div class="right-tip">
                                            <div
                                                v-if="projectBudgetAmount"
                                                style="
                                                    flex: 1;
                                                    display: flex;
                                                    flex-direction: column;
                                                    justify-content: space-around;
                                                    height: 118px;
                                                    margin-top: 17%;
                                                "
                                            >
                                                <hr class="hr-money" />
                                                <div>
                                                    <div style="line-height: 40px">
                                                        <div
                                                            style="
                                                                width: 10px;
                                                                height: 10px;
                                                                border-radius: 10px;
                                                                background-color: #3875ff;
                                                                display: inline-block;
                                                                margin-right: 5px;
                                                            "
                                                        >
                                                        </div>
                                                        <span style="font-size: 15px"
                                                            >总人力成本
                                                            <span
                                                                style="
                                                                    font-size: 26px;
                                                                    height: 34px;
                                                                    font-weight: 600;
                                                                    position: relative;
                                                                    display: inline-block;
                                                                    width: 121px;
                                                                    text-align: right;
                                                                "
                                                            >
                                                                {{ projectBudget[0].value }}
                                                            </span>
                                                            万元</span
                                                        >
                                                    </div>
                                                </div>
                                                <hr class="hr-money" />
                                                <div style="line-height: 40px">
                                                    <div
                                                        style="
                                                            width: 10px;
                                                            height: 10px;
                                                            border-radius: 10px;
                                                            background-color: #ff8448;
                                                            display: inline-block;
                                                            margin-right: 5px;
                                                        "
                                                    >
                                                    </div>

                                                    <span style="font-size: 15px"
                                                        >总直接费用
                                                        <span
                                                            style="
                                                                font-size: 26px;
                                                                height: 34px;
                                                                font-weight: 600;
                                                                position: relative;
                                                                display: inline-block;
                                                                width: 122px;
                                                                text-align: right;
                                                            "
                                                        >
                                                            {{ projectBudget[1].value }}
                                                        </span>
                                                        万元</span
                                                    >
                                                </div>
                                                <hr class="hr-money" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="prime-right">
                                        <a-row>
                                            <a-col :span="18">
                                                <span style="line-height: 50px; font-size: 15px"
                                                    >已发生人力成本
                                                    <span
                                                        style="
                                                            font-size: 26px;
                                                            height: 40px;
                                                            font-weight: 600;
                                                            position: relative;
                                                            display: inline-block;
                                                            width: 125px;
                                                            text-align: right;
                                                        "
                                                    >
                                                        {{ LaborCosts[0].money }}
                                                    </span>
                                                    万元</span
                                                >
                                            </a-col>
                                            <a-col :span="6">
                                                <div class="progress-bar" ref="progressBar" style="height: 50px"></div>
                                            </a-col>
                                        </a-row>
                                        <a-row>
                                            <a-col :span="18">
                                                <span style="line-height: 50px; font-size: 15px"
                                                    >已发生直接费用
                                                    <span
                                                        style="
                                                            font-size: 26px;
                                                            height: 40px;
                                                            font-weight: 600;
                                                            position: relative;
                                                            display: inline-block;
                                                            width: 125px;
                                                            text-align: right;
                                                        "
                                                    >
                                                        {{ LaborCosts[1].money }}
                                                    </span>
                                                    万元</span
                                                >
                                            </a-col>
                                            <a-col :span="6">
                                                <div class="progress-bar" ref="directCosts" style="height: 50px"></div>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="risk">
                            <div class="risk-left">
                                <div class="risk-col-left">当前任务冲刺目标</div>
                                <a-button
                                    @click="EditSprint"
                                    type="text"
                                    style="float: right; top: -25px; font-size: 16px; color: #3875ff"
                                    >编辑</a-button
                                >

                                <div style="overflow-y: auto; height: 250px; width: 100%">
                                    <a-timeline style="margin-left: 7px; flex-grow: 1">
                                        <a-timeline-item
                                            color="#A7B0FB"
                                            style="font-size: 16px"
                                            v-for="item in sprintGoalList"
                                        >
                                            <span
                                                v-if="sprintGoalList.length > 0"
                                                style="font-size: 18px; font-weight: 600"
                                                >{{ item.month }}月</span
                                            >
                                            {{ item.sprintGoal }}</a-timeline-item
                                        >
                                    </a-timeline>
                                </div>
                            </div>
                            <div class="risk-right">
                                <div class="annex-col">附件</div>
                                <a
                                    v-if="false"
                                    type="text"
                                    style="color: #3875ff; position: absolute; top: 10px; right: 24px; font-size: 16px"
                                    @click="handlerViewAnnex"
                                    ><paper-clip-outlined style="color: #3875ff" /> 任务附件</a
                                >
                                <div class="annex-box">
                                    <div v-for="(item, index) in annexList" class="annex-item">
                                        <paper-clip-outlined style="color: #3875ff" />
                                        <a :href="item.url" :title="item.name" style="color: #3875ff" target="_blank">
                                            {{ item.name }}</a
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="risk-new">
                            <div class="risk-col">当前项目风险</div>
                            <div class="title-tip">
                                <div class="tag-fx"
                                    ><a-tag class="parallelogram-risk">风险事件</a-tag>{{ riskData }}
                                </div>
                                <div class="tag-fx"
                                    ><a-tag class="parallelogram-solution">解决方案</a-tag>{{ riskSolution }}</div
                                >
                            </div>
                        </div>
                        <!-- <div class="praise-complaints">
                <div class="praise-col">当前项目表扬投诉情况</div>
                <div class="praise-content">
                  <div class="praise-item" v-for="(item, index) in eventDataSource" :key="index">
                    <div class="praise-item-title">
                      <p class="praise-item-title">{{ item.eventType }} &nbsp;&nbsp;</p>
                    </div>
                    <div class="praise-main">
                      {{ item.incidentDescription }}
                    </div>
                    <div class="praise-annex">
                      <div v-for="(annex, index) in JSON.parse(item.attachment)" class="annex-items">
                        <paper-clip-outlined style="color: #3875FF;" /> <a :href="annex.url" :title="item.attachmentName" style="color: #3875FF;" target="_blank"> {{ annex.name }}</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div> -->
                    </div>
                    <!-- END 回款里程碑 -->
                </div>
                <a-modal
                    v-model:visible="modalVisible"
                    width="800px"
                    okText="保存并提交"
                    title="新增回款里程碑"
                    @ok="handlerAdd"
                    destroyOnClose
                >
                    <div class="form-div">
                        <a-form ref="formRef" :model="dataList">
                            <div
                                v-for="(item, index) in dataList"
                                :key="index"
                                style="border-bottom: 1px solid #3875ff; margin-top: 24px"
                            >
                                <a-row :gutter="24">
                                    <a-col :span="22" style="padding-left: 47px">
                                        <a-form-item
                                            :rules="milestoneNameRule"
                                            label="回款里程碑名称"
                                            :name="[index, 'paymentMilepostName']"
                                        >
                                            <a-input
                                                v-model:value="dataList[index].paymentMilepostName"
                                            /> </a-form-item
                                    ></a-col>
                                    <a-col :span="2">
                                        <div @click="removeIdx(item, index)" class="btn-delete"> 删除 </div>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="24">
                                    <a-col :span="11" style="padding-left: 25px">
                                        <a-form-item
                                            :rules="[
                                                { required: true, message: '请输入计划回款金额', trigger: 'blur' }
                                            ]"
                                            label="计划回款金额(万元)"
                                            :name="[index, 'money']"
                                        >
                                            <a-input-number
                                                placeholder="请输入计划回款金额(万元)"
                                                :min="0"
                                                :max="99999999.99"
                                                v-model:value="dataList[index].money"
                                                style="width: 100%"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="11" style="padding-left: 60px">
                                        <a-form-item
                                            :name="[index, 'planPaymentTime']"
                                            label="计划回款日期"
                                            :rules="[
                                                { required: true, message: '请选择计划回款日期', trigger: 'blur' }
                                            ]"
                                        >
                                            <a-date-picker
                                                v-model:value="dataList[index].planPaymentTime"
                                                style="width: 100%"
                                                :valueFormat="'YYYY-MM-DD'"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </div>
                        </a-form>
                    </div>
                    <a-button v-if="!isEdit" class="btn-add-top" @click="addForm"
                        ><plus-outlined class="icon" />添加</a-button
                    >
                </a-modal>
                <a-modal
                    v-model:visible="editVisible"
                    width="800px"
                    okText="保存并提交"
                    title="编辑回款里程碑"
                    @ok="handlerEditConfirm"
                    destroyOnClose
                    @cancel="editCancel"
                >
                    <div class="form-div">
                        <a-form ref="editFormRef" :model="editDataList">
                            <a-row :gutter="24">
                                <a-col :span="22" style="padding-left: 47px">
                                    <a-form-item
                                        :rules="milestoneNameRule"
                                        label="回款里程碑名称"
                                        name="paymentMilepostName"
                                    >
                                        <a-input v-model:value="editDataList.paymentMilepostName" /> </a-form-item
                                ></a-col>
                                <a-col :span="2" />
                            </a-row>
                            <a-row :gutter="24">
                                <a-col :span="11" style="padding-left: 25px">
                                    <a-form-item
                                        :rules="[{ required: true, message: '请输入计划回款金额', trigger: 'blur' }]"
                                        label="计划回款金额(万元)"
                                        name="money"
                                    >
                                        <a-input-number
                                            placeholder="请输入计划回款金额(万元)"
                                            :min="0"
                                            :max="99999999.99"
                                            v-model:value="editDataList.money"
                                            style="width: 100%"
                                        />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="11" style="padding-left: 60px">
                                    <a-form-item
                                        name="currentPlanTime"
                                        label="计划回款日期"
                                        :rules="[{ required: true, message: '请选择计划回款日期', trigger: 'blur' }]"
                                    >
                                        <a-date-picker
                                            v-model:value="editDataList.currentPlanTime"
                                            style="width: 100%"
                                            :valueFormat="'YYYY-MM-DD'"
                                        />
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <div style="border-bottom: 1px solid #3875ff; margin-top: 24px"> </div>
                        </a-form>
                        <!-- 底部动作列表 -->
                        <a-form ref="editBotFormRef" :model="editDataList.ppmPaymentMilepostDetailList">
                            <div
                                v-for="(item, index) in editDataList.ppmPaymentMilepostDetailList"
                                :key="index"
                                style="margin-top: 24px"
                            >
                                <a-row :gutter="24">
                                    <a-col :span="11" style="padding-left: 25px">
                                        <a-form-item
                                            label="实际回款金额(万元)"
                                            :name="[index, 'paymentMoney']"
                                            :rules="[
                                                { required: true, message: '请输入实际回款金额', trigger: 'blur' }
                                            ]"
                                        >
                                            <a-input-number
                                                placeholder="请输入实际回款金额(万元)"
                                                :min="0"
                                                :max="99999999.99"
                                                v-model:value="item.paymentMoney"
                                                style="width: 100%"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="11" style="padding-left: 60px">
                                        <a-form-item
                                            :name="[index, 'paymentTime']"
                                            label="实际回款日期"
                                            :rules="[
                                                { required: true, message: '请选择实际回款日期', trigger: 'blur' }
                                            ]"
                                        >
                                            <a-date-picker
                                                v-model:value="item.paymentTime"
                                                style="width: 100%"
                                                :valueFormat="'YYYY-MM-DD'"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="2">
                                        <div @click="editRemoveIdx(item, index)" class="btn-delete"> 删除 </div>
                                    </a-col>
                                </a-row>
                            </div>
                        </a-form>
                        <!-- 底部动作列表 -->
                    </div>
                    <a-button class="btn-add-top" @click="editAddForm"><plus-outlined class="icon" />添加</a-button>
                </a-modal>
                <!-- 记录弹出 -->
                <a-modal v-model:visible="notesVisible" title="回款里程碑回款记录" :footer="null" width="800px">
                    <a-row>
                        <div class="note-top">
                            计划回款金额:<span class="note-money">{{ noteData.money }}万元</span>
                        </div>
                    </a-row>
                    <div style="border-bottom: 1px solid #3875ff; margin-top: 16px; margin-bottom: 16px"></div>
                    <div
                        v-for="(item, index) in noteData.ppmPaymentMilepostDetailList"
                        :key="index"
                        class="note-bottom"
                    >
                        <div class="note-bottom-line"
                            ><div class="bottom-title">实际回款金额:</div>
                            <div class="bottom-num">{{ item.paymentMoney }}万元</div></div
                        >
                        <div class="note-bottom-line">
                            <div class="bottom-title">实际回款日期:</div>
                            <div class="bottom-num">{{ item.paymentTime }}</div>
                        </div>
                    </div>
                </a-modal>
                <!-- 记录弹出 -->
                <a-modal
                    v-model:visible="confirmVisible"
                    title="完成"
                    @ok="handlerConfirm"
                    destroyOnClose
                    okText="保存并提交"
                >
                    <a-form ref="confirmRef" :model="confirmModel">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="实际回款时间"
                                    :rules="[{ required: true, message: '请选择实际回款时间', trigger: 'blur' }]"
                                    name="actuallyPaymentTime"
                                >
                                    <a-date-picker
                                        v-model:value="confirmModel.actuallyPaymentTime"
                                        style="width: 100%"
                                        :valueFormat="'YYYY-MM-DD'"
                                        placeholder="请输入实际回款金额"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="实际回款金额"
                                    :rules="[{ required: true, message: '请输入实际回款金额', trigger: 'blur' }]"
                                    name="num"
                                >
                                    <a-input-number
                                        style="width: 100%"
                                        :min="0"
                                        v-model:value="confirmModel.num"
                                        placeholder="请输入实际回款金额"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-modal>
                <a-modal v-model:visible="sprintVisible" width="800px" @ok="handlerEditTarget" title="项目冲刺目标">
                    <div class="form-div">
                        <div v-for="(item, index) in sprintTargetList">
                            <a-form :model="item" ref="sprintRef">
                                <a-row>
                                    <a-col :span="22">
                                        <a-form-item
                                            :rules="[{ required: true, message: '请输入冲刺目标', trigger: 'blur' }]"
                                            label="冲刺目标"
                                            name="sprintGoal"
                                            :label-col="{ span: 4 }"
                                            :wrapper-col="{ span: 20 }"
                                        >
                                            <a-input v-model:value="item.sprintGoal" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="1">
                                        <div @click="removeTarget(item, index)" class="btn-delete"> 删除 </div>
                                    </a-col>
                                </a-row>
                                <a-row>
                                    <a-col :span="8" />
                                    <a-col :span="5" />
                                    <a-col :span="11" style="padding-left: 53px">
                                        <a-form-item
                                            name="month"
                                            label="月份"
                                            :rules="[{ required: true, message: '请选择月份', trigger: 'blur' }]"
                                            :label-col="{ span: 4 }"
                                            :wrapper-col="{ span: 20 }"
                                        >
                                            <a-date-picker
                                                v-model:value="item.month"
                                                style="width: 180px"
                                                :valueFormat="'YYYY-MM'"
                                                picker="month"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                                <a-divider style="background-color: #3875ff" />
                            </a-form>
                        </div>
                        <a-button class="btn-add" @click="addSprintTarget"><plus-outlined class="icon" />添加</a-button>
                    </div>
                </a-modal>
                <a-modal v-model:visible="annexVisible" title="任务附件" width="1000px">
                    <a-table
                        :columns="annexColumns"
                        :dataSource="annexDataSource"
                        :custom-row="customRow"
                        :scroll="{ x: '800' }"
                    >
                        <template v-if="column.dataIndex === 'attachment'">
                            <template v-if="record.previewPermission">
                                <a
                                    v-for="(item, index) in record.ppmEnclosureInfoList"
                                    :key="index"
                                    href="javascript:"
                                    @click="handlerDownload(item)"
                                    :class="['block', index > 2 && !record.attachmentShowAll ? 'hide' : '']"
                                >
                                    {{ item.name }}
                                </a>
                                <a
                                    v-if="record.ppmEnclosureInfoList.length > 3 && !record.attachmentShowAll"
                                    @click="record.attachmentShowAll = true"
                                    >更多</a
                                >
                            </template>
                            <template v-else>
                                <span
                                    v-for="(item, index) in record.ppmEnclosureInfoList"
                                    :key="index"
                                    :class="['block', index > 2 && !record.attachmentShowAll ? 'hide' : '']"
                                >
                                    {{ item.name }}
                                </span>
                                <a
                                    v-if="record.ppmEnclosureInfoList.length > 3 && !record.attachmentShowAll"
                                    @click="record.attachmentShowAll = true"
                                    >更多</a
                                >
                            </template>
                        </template>
                    </a-table>
                </a-modal>
            </div>
            <!-- end vid_iggljq0jjk 自定义模板_wn2w3ezp1c -->
            <!-- begin vid_t24nxlyepr 容器_uff5rjjne5 -->
            <al-box v-if="false" class="vid_t24nxlyepr">
                <!-- begin vid_1ll9hci8qk 图片_ycwl2ilht0 -->
                <al-image
                    v-if="false"
                    class="vid_1ll9hci8qk"
                    :emptyImgSrc="''"
                    :src="vid_1ll9hci8qk_props.src"
                />
                <!-- end vid_1ll9hci8qk 图片_ycwl2ilht0 -->
                <!-- begin vid_q6vekc818a 图片_ieklstvdk6 -->
                <al-image
                    v-if="false"
                    class="vid_q6vekc818a"
                    :emptyImgSrc="''"
                    :src="vid_q6vekc818a_props.src"
                    :width="'101'"
                    :height="'51'"
                />
                <!-- end vid_q6vekc818a 图片_ieklstvdk6 -->
                <!-- begin vid_7o6phcpz5x 图片_oqh6xufaao -->
                <al-image
                    v-if="false"
                    class="vid_7o6phcpz5x"
                    :emptyImgSrc="''"
                    :src="vid_7o6phcpz5x_props.src"
                    :width="'520'"
                    :height="'375'"
                />
                <!-- end vid_7o6phcpz5x 图片_oqh6xufaao -->
                <!-- begin vid_pu1j9824s0 图片_heyc389oe6 -->
                <al-image
                    v-if="false"
                    class="vid_pu1j9824s0"
                    :emptyImgSrc="''"
                    :src="vid_pu1j9824s0_props.src"
                    :width="'720'"
                    :height="'320'"
                />
                <!-- end vid_pu1j9824s0 图片_heyc389oe6 -->
                <!-- begin vid_k9j58uih5p 图片_1azohktro2 -->
                <al-image
                    v-if="false"
                    class="vid_k9j58uih5p"
                    :emptyImgSrc="''"
                    :src="vid_k9j58uih5p_props.src"
                    :width="'720'"
                    :height="'320'"
                />
                <!-- end vid_k9j58uih5p 图片_1azohktro2 -->
            </al-box>
            <!-- end vid_t24nxlyepr 容器_uff5rjjne5 -->
        </a-spin>
    </div>
</template>
<script setup>
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'
    /*** PUBLISH_EXEGESIS ***
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID
    const props = defineProps({
        processInstanceId: {
            type: String
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')
    const vid_1ll9hci8qk_imageUrl = 'http://10.40.0.33:9001/file-storage/421949328274890752.png'

    const vid_1ll9hci8qk_props = reactive({
        src: vid_1ll9hci8qk_imageUrl
    })
    const vid_q6vekc818a_imageUrl = 'http://10.40.0.33:9001/file-storage/404789380744112128.png'

    const vid_q6vekc818a_props = reactive({
        src: vid_q6vekc818a_imageUrl
    })
    const vid_7o6phcpz5x_imageUrl = 'http://10.40.0.33:9001/file-storage/404789383457826816.png'

    const vid_7o6phcpz5x_props = reactive({
        src: vid_7o6phcpz5x_imageUrl
    })
    const vid_pu1j9824s0_imageUrl = 'http://10.40.0.33:9001/file-storage/404789396508403712.png'

    const vid_pu1j9824s0_props = reactive({
        src: vid_pu1j9824s0_imageUrl
    })
    const vid_k9j58uih5p_imageUrl = 'http://10.40.0.33:9001/file-storage/404789397871552512.png'

    const vid_k9j58uih5p_props = reactive({
        src: vid_k9j58uih5p_imageUrl
    })

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        processInstanceId: props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    import * as echarts from 'echarts'
    // 处理校验
    let oHead = null

    onMounted(() => {
        let style = document.createElement('style')
        style.setAttribute('id', 'Page520Style')
        style.type = 'text/css'
        style.innerHTML = '.app .left-layout .left-layout__content-wrapper { padding-bottom: 0px; }'
        oHead = document.getElementsByTagName('head').item(0)
        oHead.appendChild(style)
    })
    onUnmounted(() => {
        let oStyle = document.getElementById('Page520Style')
        oHead.removeChild(oStyle)
    })
    const milestoneNameRule = [
        { required: true, message: '请输入回款里程碑名称!', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                const arr = dataList.value.filter(
                    item => item.paymentMilepostName === value && item.paymentMilepostName !== undefined
                )
                if (arr.length > 1) {
                    return Promise.reject()
                }
                return Promise.resolve()
            },
            message: '里程碑名称重复！',
            trigger: 'blur'
        }
    ]
    const searchValue = ref('')
    const editId = ref(null)
    const modalVisible = ref(false)
    const editVisible = ref(false)
    const notesVisible = ref(false)
    const modalTitle = ref('新增回款里程碑')
    const confirmVisible = ref(false)
    const confirmRef = ref(null)
    const confirmModel = ref({
        num: undefined,
        actuallyPaymentTime: undefined
    })
    const expandedKeys = ref([])
    const selectedKeys = ref([])
    const fieldNames = { children: 'children', title: 'projectName', key: 'projectId', parentId: 'parentId' }
    const dataList = ref([])
    const editDataList = ref({
        paymentMilepostName: undefined,
        pendingPayment: undefined,
        money: undefined,
        ppmPaymentMilepostDetailList: []
    })
    const noteData = ref({})
    const dataListItem = {
        paymentMilepostName: undefined,
        pendingPayment: undefined,
        money: undefined,
        planPaymentTime: undefined,
        actuallyPaymentTime: undefined,
        actualMoney: undefined
    }
    const editDataItem = {
        paymentMoney: undefined,
        paymentTime: undefined
    }
    const autoExpandParent = ref(true)
    const treeData = ref([])
    const treeDataFlatten = ref([])
    //数据
    const milestoneDataList = ref([])
    const collectionList = ref([])
    const isEdit = ref(false)
    const projectData = ref({
        projectName: '',
        startTime: '',
        endTime: '',
        plName: ''
    })
    const overlayStyle = {
        width: '326px',
        borderRadius: '4px 4px 4px 0px 2px',
        maxWidth: 'unset'
    }
    const getTreeData = () => {
        const params = {
            projectName: searchValue.value ? searchValue.value : '', //搜索框
            projectType: '交付'
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/delivery_project/tree/projectList', params).then(data => {
            treeData.value = data.data
        })
    }
    getTreeData()
    // 搜索框变化事件
    const onChange = e => {
        getTreeData()
    }

    // 树选中
    const treeSelect = () => {
        if (selectedKeys.value[0]) {
            // 获取项目详情 /solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/list
            get(`/solution-ppm/api/v2/built-in-system-ppm/project/inquiry_project/${selectedKeys.value[0]}`).then(
                data => {
                    projectData.value.projectName = data.projectName
                    projectData.value.startTime = data.startTime
                    projectData.value.endTime = data.endTime
                    projectData.value.plName = data.plName
                    getMilepostData()
                    getCollectionData()
                    // 新需求冲刺
                    getSprintData()
                    // 回款分析
                    getCollectionChartData()
                    // 附件
                    getAnnexData()
                    // 风险事件
                    getRiskList()
                    // 投诉表扬
                    getEventTableData()
                }
            )
        } else {
            message.info('请选择一个项目')
        }
    }
    const onExpand = keys => {
        expandedKeys.value = keys
        autoExpandParent.value = false
    }
    // 里程碑数据
    const getMilepostData = () => {
        const params = {
            endTime: '',
            projectId: selectedKeys.value[0]
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/v2/milepost/list', params).then(data => {
            milestoneDataList.value = data.data.dataList
            getMilepostChart()
        })
    }

    function getMilepostChart() {
        setTimeout(() => {
            renderCharts()
        }, 0)
    }

    function renderCharts() {
        for (let i = 0; i < milestoneDataList.value.length; i++) {
            const chartElement = document.getElementById(`chart${i}`)
            let chart = echarts.init(chartElement)

            const redTasks = milestoneDataList.value[i].percentageOfRedTasks
            const greenTasks = milestoneDataList.value[i].percentageOfGreenTasks
            const greyTasks = milestoneDataList.value[i].percentageOfGreyTasks

            let data

            if (redTasks === null && greenTasks === null && greyTasks === null) {
                data = [{ value: 1, itemStyle: { color: '#788397', opacity: 0.4 } }]
            } else {
                data = [
                    { name: '超期', value: redTasks || 0, itemStyle: { color: '#FF2A00', opacity: 1 } },
                    { name: '完成', value: greenTasks || 0, itemStyle: { color: '#38A45A', opacity: 0.8 } },
                    { name: '未开始', value: greyTasks || 0, itemStyle: { color: '#788397', opacity: 0.4 } }
                ]
            }

            let option = {
                series: [
                    {
                        type: 'pie',
                        radius: ['60%', '80%'],
                        grid: {
                            top: '5px',
                            bottom: '5px',
                            left: '5px',
                            right: '5px'
                        },
                        labelLine: {
                            show: false
                        },
                        data: data
                    }
                ]
            }

            chart.setOption(option)
        }
    }

    // 回款里程碑数据
    const getCollectionData = () => {
        const params = {
            milepostId: selectedKeys.value[0]
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/payment-milepost/list', params).then(data => {
            collectionList.value = data.data
        })
    }
    let addForm = () => {
        dataList.value.push({ ...dataListItem })
    }
    // 删除操作
    let removeIdx = (item, index) => {
        dataList.value.splice(index, 1)
    }
    let editAddForm = () => {
        // 确保在访问属性之前 editDataList.value 不是未定义的
        if (editDataList.value) {
            // 在推送之前确保 ppmPaymentMilepostDetailList 已经被正确初始化为数组
            if (!editDataList.value.ppmPaymentMilepostDetailList) {
                editDataList.value.ppmPaymentMilepostDetailList = []
            }

            editDataList.value.ppmPaymentMilepostDetailList.push({ ...editDataItem })
        }
    }
    function editCancel() {
        getCollectionData()
    }
    // 删除操作
    let editRemoveIdx = (item, index) => {
        editDataList.value.ppmPaymentMilepostDetailList.splice(index, 1)
    }
    // 添加
    let addCollection = () => {
        if (selectedKeys.value.length > 0) {
            isEdit.value = false
            modalVisible.value = true
            dataList.value = []
            dataList.value.push({ ...dataListItem })
        } else {
            message.info('请选择项目')
        }
    }
    // 编辑
    let handlerEdit = item => {
        editVisible.value = true
        editDataList.value = { ...item }
    }
    function handlerEditConfirm() {
        // 使用 Promise.all 来等待两个表单的校验完成
        Promise.all([editBotFormRef.value.validate(), editFormRef.value.validate()])
            .then(() => {
                // 两个表单都校验通过后执行的操作
                let params = { ...editDataList.value }
                post('/solution-ppm/api/v2/built-in-system-ppm/payment-milepost/edit', params)
                    .then(data => {
                        if (data.code === 200) {
                            message.success('修改成功')
                            editVisible.value = false
                            getCollectionData()
                        }
                    })
                    .catch(error => {
                        message.error(error)
                    })
            })
            .catch(errors => {
                // 处理校验失败时的错误信息
                console.error('Validation failed:', errors)
            })
    }
    // 删除回款里程碑
    function handlerDelete(item) {
        del(`/solution-ppm/api/v2/built-in-system-ppm/payment-milepost/del/${item.id}`)
            .then(data => {
                if (data.code === 200) {
                    message.success('删除成功')
                    getCollectionData()
                } else {
                    message.error(data.message)
                }
            })
            .catch(error => {
                message.error(error)
            })
    }
    // 记录弹窗
    function handlerShowNotes(item) {
        notesVisible.value = true
        noteData.value = { ...item }
    }

    // 完成按钮
    let confirm = (id, pendingPayment) => {
        const todayFormatted = dayjs().format('YYYY-MM-DD')
        confirmModel.value.actuallyPaymentTime = todayFormatted
        editId.value = id
        confirmVisible.value = true
        confirmModel.value.num = pendingPayment
    }
    const handlerConfirm = () => {
        confirmRef.value.validate().then(() => {
            const params = {
                actualMoney: confirmModel.value.num,
                actuallyPaymentTime: confirmModel.value.actuallyPaymentTime
            }
            post(`/solution-ppm/api/v2/built-in-system-ppm/payment-milepost/finish/${editId.value}`, params).then(
                () => {
                    confirmVisible.value = false
                    getCollectionData()
                    editId.value = null
                    message.success('操作成功')
                }
            )
        })
    }
    const formRef = ref(null)
    const editFormRef = ref(null)
    const editBotFormRef = ref(null)
    // 提交
    const handlerAdd = () => {
        formRef.value.validate().then(() => {
            const params = {
                milepostId: selectedKeys.value[0],
                ppmPaymentMilepostFormList: dataList.value
            }
            post('/solution-ppm/api/v2/built-in-system-ppm/payment-milepost/add', params).then(data => {
                if (data.code === 200) {
                    message.success('添加成功')
                    modalVisible.value = false
                    getCollectionData()
                    getCollectionChartData()
                } else {
                    message.error(data.message)
                }
            })
        })
    }

    //新需求
    const moneyStyle = {
        fontSize: '30px',
        fontWeight: '800'
    }
    const annexList = ref([])
    const costChart = ref(null)
    const primeChart = ref(null)
    const progressBar = ref(null)
    const directCosts = ref(null)
    const sprintRef = ref(null)
    const sprintVisible = ref(false)
    const annexVisible = ref(false)
    // 附件表格
    const annexColumns = [
        {
            title: '项目阶段名称',
            dataIndex: 'milepostName',
            resizable: true,
            key: 'milepostName',
            width: '200px',
            customCell: ({ rowSpan }) => {
                return {
                    rowSpan: rowSpan
                }
            }
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            width: '200px',
            resizable: true
        },
        {
            title: '附件',
            dataIndex: 'attachment',
            resizable: true,
            width: '200px'
        }
    ]
    const annexDataSource = ref([])
    // 回款分析图数据
    const collectionMoneyData = ref([])
    // 回款分析项目总金额
    const totalProjectAmount = ref(null)
    // 项目预算
    const projectBudget = ref([
        { value: 511.7711, name: '总人力成本' },
        { value: 981.8211, name: '总直接成本' }
    ])
    // 项目预算
    const projectBudgetAmount = ref(489.1119)
    // 人力图表
    const LaborCosts = ref([
        {
            value: 93,
            name: '已发生人力成本',
            money: 986.1198
        },
        {
            value: 98,
            name: '已发生直接费用',
            money: 189.1114
        }
    ])
    // 冲刺目标
    const sprintTargetList = ref([
        {
            sprintGoal: '',
            month: '',
            id: null
        }
    ])
    const sprintGoalList = ref([])
    // 风险
    const riskData = ref('')

    const riskSolution = ref('')
    let EditSprint = () => {
        if (selectedKeys.value.length == 0) {
            message.info('请选择一个项目')
        } else {
            get(
                `/solution-ppm/api/v2/built-in-system-ppm/v2/project/findSprintGoalByProjectId/${selectedKeys.value[0]}`
            ).then(data => {
                sprintTargetList.value = data.data
                sprintVisible.value = true
            })
        }
    }
    let addSprintTarget = () => {
        sprintTargetList.value.push({
            sprintGoal: '',
            month: '',
            id: null
        })
    }
    let removeTarget = (item, index) => {
        sprintTargetList.value.splice(index, 1)
    }
    let handlerEditTarget = () => {
        for (let i = 0; i < sprintTargetList.value.length; i++) {
            let item = sprintTargetList.value[i]
            if (!item.sprintGoal || !item.month) {
                message.error(`请补充第${i + 1}条数据`)
                return
            }
        }
        const params = {
            projectId: selectedKeys.value[0],
            ppmProjectSprintGoalList: sprintTargetList.value
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/v2/project/saveOrUpdate', params).then(data => {
            if (data.code === 200) {
                message.success('编辑成功')
                sprintVisible.value = false
                getSprintData()
            } else {
                message.error(data.message)
            }
        })
    }
    let getProjectAmount = () => {
        // 获取DOM元素
        const chartDom = costChart.value
        // 基于DOM元素初始化ECharts实例
        const myChart = echarts.init(chartDom)
        // 设置环形图的数据和样式
        myChart.setOption({
            color: ['#3875FF', '#FF8448'],
            tooltip: {
                trigger: 'item'
            },
            title: [
                {
                    text: `{a|合同总金额}\n{b|${totalProjectAmount.value}}\n{c|万元}`, // 设置标题文本，并使用富文本标签
                    left: '50%',
                    textAlign: 'center',
                    bottom: 'center',
                    textStyle: {
                        rich: {
                            // 定义富文本标签的样式
                            a: {
                                color: 'black',
                                fontSize: 16, // 合同总金额的字体大小
                                lineHeight: 24 // 设置行高为 24，实现行间距效果
                            },
                            b: {
                                color: 'black',
                                fontWeight: 600,
                                fontSize: 25, // 10000的字体大小
                                lineHeight: 36 // 设置行高为 36，实现行间距效果
                            },
                            c: {
                                color: 'black',
                                fontSize: 16, // 万元的字体大小
                                lineHeight: 24 // 设置行高为 24，实现行间距效果
                            }
                        }
                    }
                }
            ],
            series: [
                {
                    type: 'pie',
                    radius: ['66%', '76%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: collectionMoneyData.value
                }
            ]
        })
    }
    // 新需求冲刺
    let getSprintData = () => {
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/v2/project/findSprintGoalByProjectId/${selectedKeys.value[0]}`
        ).then(data => {
            sprintGoalList.value = data.data
        })
    }
    // 附件
    let getAnnexData = () => {
        get(`/solution-ppm/api/v2/built-in-system-ppm/v2/project/list/${selectedKeys.value[0]}`).then(data => {
            annexList.value = data.data
        })
    }
    // 成本分析
    let getCollectionChartData = () => {
        get(`/solution-ppm/api/v2/built-in-system-ppm/payment-milepost/listByProject/${selectedKeys.value[0]}`).then(
            data => {
                collectionMoneyData.value = data.data ? data.data.paymentStatus : []
                totalProjectAmount.value = data.data ? data.data.money : null
                // 成本分析图表
                getProjectAmount()
            }
        )
    }
    // 风险事件
    let getRiskList = () => {
        get(`/solution-ppm/api/v2/built-in-system-ppm/v2/project/getLatestExtremeRisk/${selectedKeys.value[0]}`).then(
            data => {
                riskData.value = data.data ? data.data.riskDescription : ''
                riskSolution.value = data.data ? data.data.solution : ''
            }
        )
    }

    // let getChartData = () => {

    //   getPrimeChart()
    //   getCostChart()
    //   getDirectChart()
    // }
    // end新需求

    // 成本分析
    let getPrimeChart = () => {
        // 获取DOM元素
        const chartDom = primeChart.value
        // 基于DOM元素初始化ECharts实例
        const myChart = echarts.init(chartDom)
        // 设置环形图的数据和样式
        myChart.setOption({
            color: ['#3875FF', '#FF8448'],
            tooltip: {
                trigger: 'item'
            },

            title: [
                {
                    text: `{a|项目总预算}\n{b|${projectBudgetAmount.value}}\n{c|万元}`, // 设置标题文本，并使用富文本标签
                    left: '50%',
                    textAlign: 'center',
                    bottom: 'center',
                    textStyle: {
                        rich: {
                            // 定义富文本标签的样式
                            a: {
                                color: 'black',
                                fontSize: 16, // 合同总金额的字体大小
                                lineHeight: 24 // 设置行高为 24，实现行间距效果
                            },
                            b: {
                                color: 'black',
                                fontWeight: 600,
                                fontSize: 25, // 10000的字体大小
                                lineHeight: 36 // 设置行高为 36，实现行间距效果
                            },
                            c: {
                                color: 'black',
                                fontSize: 16, // 万元的字体大小
                                lineHeight: 24 // 设置行高为 24，实现行间距效果
                            }
                        }
                    }
                }
            ],
            series: [
                {
                    type: 'pie',
                    radius: ['66%', '76%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    data: projectBudget.value
                }
            ]
        })
    }

    let getCostChart = () => {
        const chart = echarts.init(progressBar.value)
        chart.setOption({
            tooltip: {
                show: true
            },
            grid: {
                top: '20%', // 设置上边距为 20%
                bottom: '20%' // 设置下边距为 20%
            },
            xAxis: {
                type: 'value',
                show: false
            },
            yAxis: {
                type: 'category',
                data: ['进度条'],
                show: false
            },
            series: [
                {
                    type: 'bar',
                    center: ['0%', '60%'],
                    data: [
                        {
                            value: LaborCosts.value[0].value,
                            itemStyle: {
                                color: '#FF2A00'
                            }
                        }
                    ],
                    barWidth: 10,
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}%',
                        position: ['80%', '10%']
                    },
                    itemStyle: {
                        barBorderRadius: 50
                    },
                    tooltip: {
                        show: false
                    },
                    backgroundStyle: {
                        color: '#ddd'
                    },
                    progress: {
                        show: true,
                        width: 20,
                        itemStyle: {
                            color: '#62c87f',
                            borderWidth: 0,
                            borderRadius: 10
                        }
                    }
                }
            ]
        })
    }
    let getDirectChart = () => {
        const chart = echarts.init(directCosts.value)
        chart.setOption({
            tooltip: {
                show: true
            },
            grid: {
                top: '20%', // 设置上边距为 20%
                bottom: '20%' // 设置下边距为 20%
            },
            xAxis: {
                type: 'value',
                show: false
            },
            yAxis: {
                type: 'category',
                data: ['进度条'],
                show: false
            },
            series: [
                {
                    type: 'bar',
                    center: ['0%', '50%'],
                    data: [
                        {
                            value: LaborCosts.value[1].value,
                            itemStyle: {
                                color: '#07AB99'
                            }
                        }
                    ],
                    barWidth: 10,
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}%',
                        position: ['80%', '10%']
                    },
                    itemStyle: {
                        barBorderRadius: 50
                    },
                    tooltip: {
                        show: false
                    },
                    backgroundStyle: {
                        color: '#ddd'
                    },
                    progress: {
                        show: true,
                        width: 20,
                        itemStyle: {
                            color: '#62c87f',
                            borderWidth: 0,
                            borderRadius: 10
                        }
                    }
                }
            ]
        })
    }
    // 任务附件
    function handlerViewAnnex() {
        annexVisible.value = true
        groupData(annexDataSource.value)
    }
    // 下载附件
    function handlerDownload({ url, name }) {
        function downBlob(blob) {
            const downloadElement = document.createElement('a')
            const href = window.URL.createObjectURL(blob) // 创建下载的链接
            downloadElement.href = href
            downloadElement.download = name // 下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() // 点击下载
            document.body.removeChild(downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL(href)
        }
        const data = new FormData()
        data.append('path', url)
        post('/solution-ppm/api/v2/built-in-system-ppm/delivery_task/downloadFile', data, {
            responseType: 'blob',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(blob => {
            downBlob(blob)
        })
    }
    // 合并单元格
    function groupData(data) {
        //声明一个新字段
        let currentMilepostName = ''
        return data.map((item, index) => {
            if (currentMilepostName !== item.milepostName) {
                currentMilepostName = item.milepostName
                let rowSpan = 0
                for (let i = 0; i < data.length; i++) {
                    if (i >= index) {
                        if (currentMilepostName === data[i].milepostName) {
                            rowSpan += 1
                        } else {
                            break
                        }
                    }
                }
                item.rowSpan = rowSpan
            } else {
                item.rowSpan = 0
            }

            return item
        })
    }
    const eventDataSource = ref([])
    // 获取投诉表扬
    let getEventTableData = () => {
        const params = {
            projectId: selectedKeys.value[0]
        }
        post(`/solution-ppm/api/v2/built-in-system-ppm/praiseComplaint/queryPpmPraiseComplaintData`, params).then(
            data => {
                if (data.code === 200) {
                    eventDataSource.value = data.data
                }
            }
        )
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    .vid_t24nxlyepr {
        width: 100%;
        height: 922px;
        display: block;
    }

    .page_root {
        overflow: hidden !important;
        height: calc(100vh - 20px);
    }

    .body {
        background-color: #f6f6fa;
        display: flex;
    }

    .body .col {
        padding: 0 20px 0 20px;
        position: relative;
        font-size: 18px;
        font-weight: 800;
        margin-top: 5px;
        left: -10px;
    }

    .body .col:before {
        content: '';
        background-color: #3875ff;
        width: 5px;
        height: 18px;
        position: absolute;
        left: -10px;
        top: 75%;
        margin-left: 20px;
        margin-top: -15px;
    }

    .body .collection-col {
        padding: 0 20px;
        position: relative;
        font-size: 18px;
        font-weight: 800;
        margin-top: 5px;
        margin-left: 12px;
    }

    .body .collection-col:before {
        content: '';
        background-color: #3875ff;
        width: 5px;
        height: 18px;
        position: absolute;
        left: -10px;
        top: 75%;
        margin-left: 20px;
        margin-top: -15px;
    }

    .body .tree-box {
        overflow-y: scroll;
        min-height: 820px;
        width: 200px;
        padding: 10px;
        background-color: #fff;
        overflow: auto;
        height: 100vh;
    }

    .body .right-box {
        flex: 1;
        height: 100vh;
        min-width: 0;
        overflow: auto;
    }

    .body .right-box .back-ground {
        height: 80px;
        padding: 10px 24px;
        font-size: 24px;
        color: #fff;
        line-height: 30px;
        font-weight: 400;
        background: linear-gradient(to right, #3f48f4, #76a0ff);
    }

    .body .right-box .back-ground .title {
        font-size: 18px;
        font-weight: 400;
        margin-left: 16px;
    }

    .body .right-box .main {
        position: relative;
        top: -35px;
        height: 100%;
        padding: 0 24px;
    }

    .body .right-box .progress {
        padding: 0 20px 20px 20px;
        border: 2px solid #fff;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(6px);
        margin-bottom: 24px;
    }

    .body .right-box .progress .timeaxis {
        width: 100%;
        margin-top: 60px;
        display: flex;
        flex-flow: wrap;
    }

    .body .right-box .progress .no-progress {
        height: 370px;
        width: 100%;
        background-color: #fff;
        display: flex;
        justify-content: center;
        border: 1px solid #fff;
        border-radius: 10px;
        position: relative;
        margin-top: 10px;
        /* 水平居中 */
    }

    .body .right-box .progress .no-progress .tip {
        width: 200px;
        height: 101px;
        background-image: url('http://10.40.0.33:9001/file-storage/404789379089459200.png');
        position: absolute;
        background-size: cover;
        top: 30%;
    }

    .body .right-box .progress .no-progress .tip .message {
        position: absolute;
        left: 22%;
        bottom: -40px;
        font-size: 16px;
    }

    .body .right-box .progress .box:nth-child(-n + 5) {
        width: 20%;
        margin: 0;
    }

    .body .right-box .progress .box:nth-child(n + 11) {
        width: 20%;
        margin-top: 63px;
    }

    .body .right-box .progress .box {
        width: 20%;
        margin-top: 55px;
    }

    .body .right-box .progress .box:nth-child(n + 6) .detailed-information .message {
        margin-bottom: 0;
    }

    .body .right-box .progress .box .item {
        border-bottom: 3px solid #3f79ff;
        position: relative;
    }

    .body .right-box .progress .box .item .cercle {
        position: absolute;
        width: 25px;
        height: 25px;
        border-radius: 25px;
        background-color: #3f79ff;
        top: -11px;
        left: 0;
    }

    .body .right-box .progress .box .item .arrow {
        position: absolute;
        font-size: 35px;
        color: #3f79ff;
        top: -16px;
        right: -15px;
    }

    .body .right-box .progress .box .item .center {
        width: 100%;
        font-size: 16px;
        text-align: center;
        position: absolute;
        font-weight: 600;
        top: -55px;
    }

    .body .right-box .progress .circular {
        width: 50px;
        height: 50px;
        background: white;
        margin: auto;
        margin-bottom: -4px;
        position: relative;
        top: -13px;
    }

    .body .right-box .progress .detailed-information {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .body .right-box .progress .detailed-information .message {
        flex: 1;
        width: 20%;
        background: linear-gradient(to bottom, #f3f7fa, #ffffff);
        border-radius: 8px;
        height: 114px;
        margin: 0 8px;
        padding: 10px;
        box-shadow: 0 4px 4px #eff0f1;
        display: flex;
        flex-direction: column;
        position: relative;
        margin-bottom: 10px;
    }

    .body .right-box .progress .detailed-information .message p {
        flex: 1;
    }

    .body .right-box .progress .detailed-information .message .plan {
        font-size: 15px;
        margin: 0;
        font-weight: normal;
        display: flex;
        align-items: center;
    }

    .body .right-box .progress .detailed-information .message .plan-count {
        position: absolute;
        border-radius: 2px 8px 2px 8px;
        top: 0;
        right: -8px;
    }

    .body .right-box .progress .detailed-information .message .tag-day {
        border-radius: 10px;
        margin: 0;
    }

    .body .right-box .no-collection {
        height: 280px;
        width: 100%;
        border: 1px solid #fff;
        border-radius: 10px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        /* 水平居中 */
        /* 垂直居中 */
    }

    .body .right-box .no-collection .tip {
        width: 200px;
        height: 101px;
        background-image: url('http://10.40.0.33:9001/file-storage/404789379089459200.png');
        position: relative;
        background-size: cover;
        top: 20%;
    }

    .body .right-box .no-collection .tip .message {
        width: 250px;
        position: absolute;
        left: -4%;
        bottom: -40px;
        font-size: 16px;
    }

    .body .right-box .no-collection .tip .message span {
        color: #3875ff;
    }

    .body .right-box .collection {
        position: relative;
        width: 100%;
        border: 1px solid #fff;
        border-radius: 10px;
        background-color: #fff;
    }

    .body .right-box .collection .add-edit-btns {
        width: 150px;
        display: flex;
        height: 30px;
        line-height: 30px;
        position: absolute;
        right: -18px;
        top: 5px;
        z-index: 888;
    }

    .body .right-box .collection .add-edit-btns .collection-btn {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
        margin: 0 40px 0 0;
        font-size: 16px;
        color: #3875ff;
        vertical-align: middle;
        cursor: pointer;
        justify-content: end;
    }

    .body .right-box .collection .add-edit-btns .collection-btn .icon {
        position: absolute;
        top: 7px;
        right: 35px;
        cursor: pointer;
    }

    .body .collection-message-group {
        padding: 0 12px 0 12px;
        display: flex;
        flex-flow: wrap;
    }

    .body .collection-message-group .collection-message {
        width: calc(25% - 24px);
        height: 211px;
        padding: 16px 20px;
        flex-shrink: 0;
        margin: 5px 12px 20px 12px;
        border: 1px solid #e2e9f6;
        box-shadow: 1px 1px 1px #e2e9f6;
        border-radius: 8px;
        background-color: #fff;
        position: relative;
        overflow: hidden;
    }

    .drop-down {
        position: absolute;
        right: 5px;
        top: 10px;
        z-index: 999;
    }

    .body .collection-message-group .collection-message .order {
        width: 150px;
        position: absolute;
        right: -45px;
        top: -70px;
        font-size: 180px;
        z-index: 1;
        background: linear-gradient(to bottom, #f5f6fa, rgba(251, 251, 253, 0));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: 'SimHei-ExtB', Arial, sans-serif;
        font-weight: bold;
        -webkit-transform: skew(-10deg);
        /* for Chrome||Safari */
        -ms-transform: skew(-10deg);
        /* for IE */
        -moz-transform: skew(-10deg);
        /* for Firefox */
        -o-transform: skew(-10deg);
        /* for Opera */
    }

    .body .collection-message-group .collection-message .collection-message-title {
        position: relative;
        font-size: 16px;
        font-weight: 800;
        margin-bottom: 0;
        height: 38px;
        z-index: 888;
        cursor: pointer;
        width: 260px;
        overflow: hidden;
        /*超出部分隐藏*/
        text-overflow: ellipsis;
        /*超出部分省略号表示*/
        white-space: nowrap;
        /*强制单行显示*/
        display: inline-block;
        /*转换为行内块元素*/
    }

    .body .collection-message-group .collection-message .payment-received {
        font-size: 16px;
        font-weight: 600;
        color: #06ab9a;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .payment-received .title {
        display: inline-block;
        width: 73px;
        text-align: right;
        position: relative;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .payment-received .title .icon {
        font-size: 20px;
        position: absolute;
        top: 3px;
        left: 0;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .payment-received .finish-money {
        margin: 0 0 0 5px;
        font-size: 30px;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .payment-received .finish-unit {
        margin: 0 0 0 5px;
        font-size: 16px;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .tobe-collected-received {
        font-size: 16px;
        font-weight: 600;
        color: #ff2a00;
        margin-bottom: 0;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .tobe-collected-received .fail-money {
        font-size: 30px;
        margin: 0 0 0 5px;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .tobe-collected-received .fail-unit {
        font-size: 16px;
        margin: 0 0 0 5px;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .uncollected-payment {
        font-size: 16px;
        font-weight: 600;
        color: #788398;
        margin-bottom: 0;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .uncollected-payment .uncollected-money {
        margin: 0 0 0 5px;
        font-size: 30px;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .uncollected-payment .uncollected-unit {
        margin: 0 0 0 5px;
        font-size: 16px;
        cursor: pointer;
    }

    .body .collection-message-group .collection-message .divider-line {
        margin: 15px 0 5px 0;
        background-color: #c4c9cf;
    }

    .body .collection-message-group .collection-message .milepost-date {
        font-size: 16px;
        color: #42526e;
        margin: 0;
    }

    .body .collection-message-group .collection-message .accomplish {
        position: absolute;
        bottom: 16px;
        right: 16px;
        z-index: 888;
    }

    .body .collection-message-group .collection-message .noAccomplish {
        position: absolute;
        bottom: 13px;
        right: 16px;
        color: #3875ff;
        z-index: 888;
    }

    .btn-delete {
        width: 30px;
        position: relative;
        color: #3875ff;
        cursor: pointer;
        top: -4px;
        left: 12px;
    }

    .btn-delete .icon {
        position: absolute;
        top: 4px;
        right: 35px;
        cursor: pointer;
    }

    .btn-add {
        border-color: #3875ff;
        margin-left: 20px;
        position: relative;
        color: #3875ff;
        cursor: pointer;
    }

    .btn-add-top {
        border-color: #3875ff;
        margin-left: 20px;
        position: relative;
        color: #3875ff;
        cursor: pointer;
        top: 10px;
    }

    .btn-add .icon {
        position: absolute;
        top: 7px;
        left: 5px;
        cursor: pointer;
    }

    /deep/ .ant3-tag {
        border: none;
        background-color: rgba(255, 42, 0, 0.1);
        color: #ff2a00;
    }

    /deep/ .ant-tag {
        border: none;
        background-color: rgba(255, 42, 0, 0.1);
        color: #ff2a00;
    }

    /deep/ .ant3-tree-list-holder-inner {
        position: relative;
    }

    /deep/ .ant3-tree-list-holder-inner svg {
        position: absolute;
        top: 6px;
        left: 6px;
    }

    /deep/.left-layout .left-layout__content-wrapper {
        padding: 0 24px;
    }

    .form-div {
        max-height: 680px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .tip-tool p {
        margin-bottom: 12px;
    }

    .cost-analysis {
        margin-top: 24px;
        height: 240px;
        display: flex;
    }

    .cost-analysis .collection-analysis {
        width: 35%;
        background-color: #fff;
        border-radius: 10px;
        margin-right: 20px;
        padding: 0 20px;
    }

    .cost-analysis .cost-col {
        padding: 0 10px;
        position: relative;
        font-size: 18px;
        font-weight: 800;
        margin-top: 5px;
    }

    .cost-analysis .cost-col:before {
        content: '';
        background-color: #3875ff;
        width: 5px;
        height: 18px;
        position: absolute;
        left: -10px;
        top: 75%;
        margin-left: 10px;
        margin-top: -15px;
    }

    .cost-analysis .prime-analysis {
        background-color: #fff;
        border-radius: 10px;
        flex: 1;
        padding: 0 0 0 20px;
    }

    .cost-analysis .prime-analysis .content-cost {
        display: flex;
        justify-content: space-between;
    }

    .cost-analysis .prime-analysis .content-cost .right-chart {
        width: 60%;
        height: 200px;
        display: flex;
    }

    .cost-analysis .prime-analysis .content-cost .prime-right {
        width: 50%;
        height: 144px;
        padding: 20px 10px 20px 20px;
        border-radius: 8px;
        margin-top: 28px;
        margin-right: 30px;
        background-image: linear-gradient(180deg, #f5f6fa 0%, rgba(251, 251, 253, 0) 100%);
    }

    .left-cost-chart {
        display: flex;
    }

    .progress-bar {
        top: 3px;
        left: -5px;
    }

    .risk {
        display: flex;
        justify-content: space-between;
        min-height: 320px;
        margin-top: 24px;
        margin-bottom: 24px;
        border-radius: 10px;
    }

    .risk-left {
        width: 50%;
        min-height: 320px;
        background-color: #fff;
        margin-right: 20px;
        border-radius: 10px;
        padding: 0 20px;
        background-image: url('http://10.40.0.33:9001/file-storage/404789397871552512.png');
        background-size: cover;
        overflow-y: auto;
        background-repeat: no-repeat;
    }

    .risk-right {
        position: relative;
        height: 320px;
        flex: 1;
        border-radius: 10px;
        background-image: url('http://10.40.0.33:9001/file-storage/404789396508403712.png');
        background-size: cover;
    }

    .risk-new {
        background-color: #fff;
        border-radius: 8px;
        min-height: 245px;
        margin-bottom: 24px;
        padding-bottom: 24px;
    }

    .title-tip {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-around;
        width: 98%;
        min-height: 150px;
        margin: 16px 0 0 24px;
        border-left: 4px solid #ff2a00;
        background-image: linear-gradient(270deg, rgba(255, 42, 0, 0) 0%, rgba(255, 42, 0, 0.1) 100%);
        padding-left: 4px;
    }

    .praise-complaints {
        background-color: #fff;
        border-radius: 8px;
        min-height: 300px;
    }

    .praise-item {
        letter-spacing: 0;
        padding: 24px;
        width: 49%;
        border: 1px solid #dee8f4;
        min-height: 135px;
        border-radius: 10px;
        margin-bottom: 15px;
    }

    .praise-item-title {
        font-family: 'PingFangSC-Regular';
        color: #192842;
        font-size: 16px;
        font-weight: 600;
        margin-right: 12px;
    }

    .praise-item-title {
        margin-bottom: 16px;
    }

    .praise-item-title-time-title {
        font-weight: 400;
        font-size: 14px;
        color: #788397;
    }

    .praise-item-title-time {
        font-size: 14px;
        color: #192842;
    }

    .praise-main {
        margin-bottom: 16px;
    }

    .praise-annex {
        display: flex;
        justify-content: start;
    }

    .annex-items {
        margin-right: 10px;
    }

    .praise-content {
        margin-top: 16px;
        padding: 0 24px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .risk-col {
        top: 5px;
        left: 24px;
        padding: 0 10px;
        position: relative;
        font-size: 18px;
        font-weight: 800;
    }

    .risk-col:before {
        content: '';
        background-color: #3875ff;
        width: 5px;
        height: 18px;
        position: absolute;
        left: -10px;
        top: 75%;
        margin-left: 10px;
        margin-top: -15px;
    }

    .praise-col {
        top: 5px;
        left: 24px;
        padding: 0 10px;
        position: relative;
        font-size: 18px;
        font-weight: 800;
    }

    .praise-col:before {
        content: '';
        background-color: #3875ff;
        width: 5px;
        height: 18px;
        position: absolute;
        left: -10px;
        top: 21px;
        margin-left: 10px;
        margin-top: -15px;
    }

    .annex-col {
        top: 5px;
        padding: 0 10px;
        position: relative;
        font-size: 18px;
        font-weight: 800;
        left: 24px;
    }

    .annex-col:before {
        content: '';
        background-color: #3875ff;
        width: 5px;
        height: 18px;
        position: absolute;
        left: -10px;
        top: 75%;
        margin-left: 10px;
        margin-top: -15px;
    }

    .risk-col-left {
        top: 5px;
        padding: 0 10px;
        position: relative;
        font-size: 18px;
        font-weight: 800;
    }

    .risk-col-left:before {
        content: '';
        background-color: #3875ff;
        width: 5px;
        height: 18px;
        position: absolute;
        left: -10px;
        top: 75%;
        margin-left: 10px;
        margin-top: -15px;
    }

    .annex-box {
        height: 90%;
        overflow-y: scroll;
    }

    .annex-item {
        font-size: 14px;
        margin-top: 30px;
        margin-left: 24px;
    }

    .tag-fx {
        height: 50%;
        padding: 10px;
    }

    .parallelogram-risk {
        width: 62px;
        height: 20px;
        border: 1px solid #ff2a00;
        color: #fd3915;
        transform: skewX(-7deg);
    }

    .parallelogram-solution {
        width: 62px;
        height: 20px;
        border: 1px solid #3875ff;
        color: #3875ff;
        transform: skewX(-7deg);
    }

    /deep/ .ant3-timeline-item-tail {
        border-left: 2px dotted #a6b0fb;
    }

    /deep/.ant3-timeline-item-head {
        width: 8px;
        height: 8px;
        background-color: #a6b0fb;
        left: 1px;
    }

    .hr-money {
        background: linear-gradient(to right, #e1e4ed 0%, #e1e4ed 50%, #e1e4ed 100%);
        height: 2px;
        width: 250px;
    }

    /deep/.ant3-table-thead tr th {
        background-color: #3875ff;
        color: #fff;
        font-weight: 600;
        padding: 14px 20px;
    }

    /deep/ tr:nth-child(odd),
    /deep/ tr:nth-child(odd) td {
        background: #f8fafc;
        padding: 14px 20px;
    }
    .note-bottom {
        display: flex;
        margin-bottom: 10px;
    }
    .note-bottom-line {
        display: flex;
        width: 50%;
    }
    .bottom-title {
        margin-right: 10px;
    }
    .note-money {
        display: inline-block;
        margin-left: 16px;
    }
    .note-top {
        font-size: 20px;
        font-weight: 600;
    }
    .more-cion {
        width: 20px;
        height: 20px;
        border: 1px solid #3875ff;
        line-height: 20px;
        position: relative;
        border-radius: 2px;
    }
    .dot-icon {
        top: 30%;
        left: 50%;
        font-size: 13px;
        position: absolute;
        transform: translate(-50%, -50%);
        color: #3875ff;
        font-weight: 800;
    }
    /deep/.anticon-down {
        display: none;
    }
    /deep/.ant3-dropdown-menu-item,
    .ant3-dropdown-menu-submenu-title {
        padding: 5px 16px;
    }
    .btn-drop:hover {
        color: #3875ff;
    }
</style>
